{
	template:`
	<a-page-header title="流程" :sub-title="model.name+' ( '+model.identity+' ) 版本：'+model.version">
		<template #extra>
			<m-back @click="back(false);">关闭</m-back>
		</template>
		<a-card :hoverable="true" :bodyStyle="{padding:'20px'}">
			<a-row type="flex" justify="center" align="middle" style="margin-bottom:50px;">
				<a-col span="3" :id="'flow_start_'+key" style="text-align:center;">
					<a-avatar :size="50" style="background-color:#19be6b;">开始</a-avatar>
				</a-col>
			</a-row>
			<template v-for="(row,idx) in rows">
			<a-row v-if="row.length>0" type="flex" justify="center" align="middle" style="margin-bottom:50px;">
				<template v-for="col in row">
				<a-col span="1"></a-col>
				<a-col span="5" :id="col.oid+'_'+key">
					<a-popover>
						<a-card hoverable bodyStyle="padding:5px;" :style="{border:(insSecExe[col.oid]?'1.5px solid var(--colorPrimary)':'1px solid #aaa'),width:'151px'}">
							<table style="min-height:42px;">
								<tr>
									<td>
										<m-icon v-if="col.countersign=='Y'" name="icon-icon-138" size="30" ></m-icon>
										<m-icon v-else name="icon-icon-164" size="30" color="#2d8cf0" ></m-icon>
									</td>
									<td>{{col.name}}</td>
									<td v-if="col.forwardable=='Y'"><m-icon name="icon-icon-69" size="20" ></m-icon></td>
									<td v-if="col.saveable=='Y'"><m-icon name="icon-icon-35" size="20" ></m-icon></td>
								</tr>
							</table>
						</a-card>
						<template #content>
							<div v-if="instanceOid" style="padding:4px 0;">
								<h5>{{insModel.business.title}}</h5>
							    <a-card hoverable :bodyStyle="{padding:0}">
                                    <template v-for="(item,idx) in insSec">
                                    <div :style="{color:(col.oid==item.oid?'var(--colorPrimary)':''),backgroundColor:(idx%2==0?'#8881':'')}" style="padding:5px;">
                                        <span style="display:inline-block;min-width:40px;">{{item.index}}{{col.oid==item.oid?' >':''}} </span>
                                        <span style="display:inline-block;min-width:120px;">{{item.sec}} </span>
                                        <span style="display:inline-block;min-width:120px;">{{item.user}} </span>
                                        <span style="display:inline-block;min-width:80px;">{{item.todesc}} </span>
                                        <span>{{item.date1}} - {{item.date2}}</span>
                                        <div v-if="item.opinion" v-text="item.opinion" style="padding-left:40px;font-size:10px;"></div>
                                    </div>
                                    </template>
								</a-card>
							</div>
							<div v-else style="padding:4px 0;">
								{{col.identity}}
								&nbsp;<span v-if="col.countersign=='Y'">会签</span>
								&nbsp;<span v-if="col.forwardable=='Y'">可转发</span>
								&nbsp;<span v-if="col.saveable=='Y'">可暂存</span>
								<template v-for="item in getLinks(col.oid)">
								<div>
									(<span :style="{color:this.toColor(item.isNext)}">{{item.toDesc}}</span>)
									<span v-if="item.toSection&&item.toSection.oid">{{item.toSection.name}}</span>
									<span v-else>结束</span>
								</div>
								</template>
							</div>
						</template>
					</a-popover>
				</a-col>
				<a-col span="1"></a-col>
				</template>
			</a-row>
			</template>
			<a-row type="flex" justify="center" align="middle">
				<a-col span="3" :id="'flow_end_'+key" style="text-align:center;">
					<a-avatar :size="50" style="background:#ed4014;">结束</a-avatar>
				</a-col>
			</a-row>
		</a-card>
	</a-page-header>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
			key:'',
			defineOid:'',
			instanceOid:'',
			model:{},
			list:[],
			link:[],
			blocks:[],
			rows:[],
			lines:[],
			useSec:{},
			useSec1:{},
			startOid:"",
			jsPlumbIns:null,
			jsPlumbReady:false,
			insSec:[],
			insSecExe:{},
			insModel:{business:{}},
		};
	},
	mounted(){
		this.key=new Date().getTime();
		this.defineOid=this.param.defineOid;
		this.instanceOid=this.param.instanceOid;

		this.instanceOid=this.instanceOid||'';
		this.requestData("action/flow/flowDefine/getDefine",
			{model:{oid:this.defineOid}},
			function(json){
				if(json.code==0){
					this.model=json.model;
					this.list=json.list;
					this.link=json.link;
					this.initBlock();
					this.$nextTick(function(){
						this.initPlumbIns();
					}.bind(this));
					let insObj=[];
					let insSecExeObj={};
					if(this.instanceOid){
						this.requestData("action/flow/flowInstance/getInstance",
							{model:{oid:this.instanceOid}},
							function(json){
								for(let i=0;i<json.list.length;i++){
									let inss=json.list[i];
									insObj.push({oid:inss.flowSection.oid,index:inss.flowIndex,
										sec:inss.flowSection.name,todesc:inss.toDesc,
										user:inss.user.realname,
										date1:new Date(inss.acceptDate).formatShow('yyyy-MM-dd HH:mm'),
										date2:new Date(inss.doneDate).formatShow('yyyy-MM-dd HH:mm'),
										opinion:inss.opinion?inss.opinion.replace(/\r\n/g,'<br>'):''
									});
									insSecExeObj[inss.flowSection.oid]=true;
								}
								this.insSec=insObj;
								this.insSecExe=insSecExeObj;
								this.insModel=json.model;
							}.bind(this)
						);
					}
				}else{
					this.remind().error(json.msg);
					this.back();
				}
			}.bind(this)
		);
	},
	methods:{
		initBlock:function(){
			if(this.model&&this.model.startSection&&this.model.startSection.oid){
				this.startOid=this.model.startSection.oid;
				var sec=this.getSection(this.startOid);
				var n=this.getBlockNum(sec.block);
				var cells=this.rows[n];
				var m=cells.length;
				cells.push(sec);
				this.lines.push(['flow_start',sec.oid,0,0,'','#19be6b']);
				this.addRow(sec.oid,n,m);
			}else{
				this.remind().error("未定义开始环节");
                this.back();
			}
		},
		addRow:function(secOid,n1,m1){
			let arr=this.getLinks(secOid);
			for(let i=0;i<arr.length;i++){
				let link=arr[i];
				var t5=this.toColor(link.isNext)
				if(link.toSection&&link.toSection.oid){
					var sec=this.getSection(link.toSection.oid);
					var n2=this.getBlockNum(sec.block);
					var cells=this.rows[n2];
					var m2=this.getCellsIndex(cells,sec.oid);
					if(m2==-1){
						m2=cells.length;
						cells.push(sec);
						this.addRow(sec.oid,n2,m2);
					}
					var t2=1,t3=null;
					if(link.isNext=='B'){
						if(n2==n1) t3=[[0, 0.9, 0, 0.1],[1, 0.9, 0, 0.1]];
						else if(Math.abs(m2-m1)==0) t3=['Left','TopLeft'];
						else t3=['Right','TopRight'];
					}else if(n2==n1){
						var x=Math.abs(m2-m1);
						if(x==1) t3=[[0, 0.5, 0, -0.1],[1, 0.6, 0, -0.1]];
						else t3=[[1,0,0,-0.1],[0,0,0,-0.1]];
						t2=Math.abs(m2-m1);
					}else{
						var x=Math.abs(n2-n1);
						if(x>2) t3=['Top','Buttom'];
						else t3=[[x*0.3, 0, 1, x*0.3],[x*0.3, 1, 1, x*0.3]];
						t2=Math.abs(n2-n2);
					}
					this.lines.push([secOid,sec.oid,t2,t3,link.toDesc,t5]);
				}else if(link.isNext=='N'){
					this.lines.push([secOid,'flow_end',0,0,link.toDesc,t5]);
				}
			}
		},
		toColor:function(isNext){
			if(isNext=="Y"){
				return "#19be6b";
			}else if(isNext=="B"){
				return "#ffab36";
			}else if(isNext=="N"){
				return "#ed4014";
			}
			return "";
		},
		getCellsIndex:function(cells,secOid){
			for(var i=0;i<cells.length;i++){
				if(cells[i].oid==secOid){
					return i;
				}
			}
			return -1;
		},
		getBlockNum:function(block){
			var n=this.blocks.indexOf(block);
			if(n>=0) return n;
			this.blocks.push(block);
			this.rows.push([]);
			return this.blocks.length-1;
		},
		getSection:function(secOid){
			for(let i=0;i<this.list.length;i++){
				let sec=this.list[i];
				if(sec.oid==secOid){
					return sec;
				}
			}
			this.remind().error("环节存在异常");
            this.back();
		},
		getLinks:function(secOid){
			let arr=[];
			for(let i=0;i<this.link.length;i++){
				let link=this.link[i];
				if(link.fromSection.oid==secOid){
					arr.push(link);
				}
			}
			return arr;
		},
		initPlumbIns:function(){
			if(!this.jsPlumbIns){
				this.jsPlumbReady=false;
				this.jsPlumbIns = jsPlumb.getInstance();
				jsPlumb.ready(function () {
					this.jsPlumbReady=true;
				}.bind(this));
			}
			if(this.jsPlumbReady){
				for (let item of this.lines) {
					this.jsPlumbIns.connect({
						source: item[0]+'_'+this.key,
						target: item[1]+'_'+this.key
					}, this.getJsPlumbConfig(item))
				}
			}else{
				setTimeout(function(){this.initPlumbIns();}.bind(this),100);
			}
		},
		getJsPlumbConfig:function(item){
			let anchor=['Left', 'Right', 'Top', 'Bottom', [0.2, 0, 0, -1], [0.8, 0, 0, -1], [0.2, 1, 0, 1], [0.8, 1, 0, 1]];
			let connector=['StateMachine',{curviness:50,proximityLimit:80}];
			let color="#444";
			if(item[2]>0){
				connector=['Bezier',{curviness:5+85*item[2]}];
			}
			if(item[3]) anchor=item[3];
			if(item[5]) color=item[5];
			if(item[0]=='flow_start'||item[1]=='flow_end'){
				connector=['StateMachine',{curviness:10}];
			}
			let overlays=[['Arrow', { width: 8, length: 16, location: 1 }]];
			if(item[4]){
				overlays.push(['Custom',{create:function(){var d=document.createElement("div");d.innerHTML='<p style="background:'+color+';border:1px solid '+color+';border-radius:8px;color:#fff;font-size:11px;padding:0 3px;">'+item[4]+'</p>';return d;},location: 0.2}]);
			}
			return {
				anchor: anchor,
				connector: connector,
				endpoint: 'Blank',
				paintStyle: {stroke:color,strokeWidth:1},
				overlays: overlays
			};
		},
	}
}